<template>
  <div>
    <!-- PasswordUpdate -->
    <van-nav-bar title="账号密码更改" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit" class="forms">
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="新密码"
        placeholder="请输入新密码"
      />
      <van-field
        v-model="checkPwd"
        type="password"
        name="checkPwd"
        label="确认密码"
        placeholder="再次确认新密码"
      />

      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          native-type="submit"
          >保存</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>

import { NavBar, Form, Field, Button, Toast } from "vant";
import { updateId, logout } from "@/network";
export default {
  name: "PasswordUpdate",
  data() {
    return {
      password: "",
      checkPwd: "",
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async onSubmit() {
      const mobile = this.$store.state.userInfo.userInfo.mobile;
      if (this.password !== "" && this.password === this.checkPwd) {
        const info = {
          mobile,
          password: this.password,
        };
        const { data } = await updateId(info);
        // console.log(res);
        if (data.errno === 0) {
          await logout();
          Toast.loading({
            message: "重置账号密码成功,请重新登录",
            forbidClick: true,
            loadingType: "spinner",
          });
          await this.$store.commit("setUserInfo", null);
          await this.$store.commit("savePwd", "");
          setTimeout(() => {
            this.$router.push({ name: "Profile" });
          },1000)
        }
      } else {
        // console.log("格式错误");
        Toast("格式错误");
      }
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.forms {
  width: 90%;
  margin: 0 auto;
}
</style>

